<template>
  <div style="height: 100%;display: flex;justify-content: center;align-items: center;">
    <div :id="chartId" :style="{height: height, width: '99%', display: 'flex', justifyContent: 'center', alignItems: 'center'}"></div>
  </div>
</template>

<script>

const uuid = require('node-uuid');
export default {
  //饼图
  name: "PieChart",
  props: {
    title: {
      type: String,
      default: function () {
        return "";
      }
    },
    height: {
      type: String,
      default: function () {
        return "300px";
      }
    },
    dataList: {
      type: Array,
      default: function () {
        //[{name:"",value:""}]
        return [];
      }
    },
    //是否百分比数据
    percentageData: {
      type: Boolean,
      default: function () {
        return false
      }
    }
  },
  data() {
    return {
      chartId: "my-pie-chart",
      chartDom: null,
      chart: null,
      fontSize: {
        title: null,
        tooltip: null,
        legend: null,
        dataLabel: null
      }
    };
  },
  created() {
    this.chartId = uuid.v4();
    this.setFontSize();
  },
  mounted() {
    this.setFontSize();
    this.chartDom = document.getElementById(this.chartId);
    this.chart = this.echarts.init(this.chartDom);
    this.initOption();
  },
  methods: {
    getChatType() {
      return "pie_chart"
    },
    getChartData(dataList) {
      let datas = [];
      dataList.forEach(function (item) {
        datas.push({
          name: item.name, value: item.value
        })
      });
      return datas;
    },
    getColors(dataList) {
      let colors = [];
      dataList.forEach(function (item) {
        if (item.color) {
          colors.push(item.color);
        }
      });
      return colors;
    },
    initOption() {
      let datas = this.getChartData(this.dataList);
      let option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: "#000000c9",
          appendToBody: true,
          textStyle: {
            color: '#fff',
            fontSize: this.fontSize.tooltip
          },
          formatter(params) {
            return params.marker + params.name + ": " + params.value + "(" + params.percent + "%)";
          },
        },
        title: {
          text: this.title,
          left: '10px',
          top: 'center',
          textStyle: {
            color: "#fff",
            fontSize: this.fontSize.title
          }
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 0,
          top: 0,
          textStyle: {
            color: '#fff',
            fontSize: this.fontSize.legend
          }
        },
        /*label: {
          show: true,
          position: "inside",
          formatter: this.percentageData ? `{d}%` : `{c}`,
        },*/
        series: [
          {
            type: 'pie',
            avoidLabelOverlap: false,
            label: {
              formatter: this.percentageData ? `{d}%` : `{c}`,
              position: 'inside',
              fontSize: this.fontSize.dataLabel
            },
            radius: ['0%', '80%'],
            data: datas
          }
        ]
      };
      if (this.chart) {
        this.chart.setOption(option);
      }
    },
    setData(dataList) {
      let datas = this.getChartData(dataList);
      let colors = this.getColors(dataList);
      if (this.chart) {
        let option = this.chart.getOption();
        option.series[0].data = datas;
        if (colors && colors.length > 0) {
          option.color = colors;
        }
        this.chart.setOption(option, true);
      }
    },
    setChatFontSize() {
      if (this.chart) {
        let newOption = {
          title: {
            textStyle: {
              fontSize: this.fontSize.title
            }
          },
          tooltip: {
            textStyle: {
              fontSize: this.fontSize.tooltip
            }
          },
          legend: {
            textStyle: {
              fontSize: this.fontSize.legend
            }
          }
        };
        this.chart.setOption(newOption, false);
      }
    },
    setFontSize() {
      this.fontSize.title = this.translateFont(18);
      this.fontSize.tooltip = this.translateFont(16);
      this.fontSize.legend = this.translateFont(16);
      this.fontSize.dataLabel = this.translateFont(16);
    },
    translateFont(size) {
      let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      if(!clientWidth) return;
      let fontSize = clientWidth / 1920;
      return size * fontSize;
    },
    changeWidth() {
      if (this.chart) {
        this.setFontSize();
        this.chart.resize();
        this.setChatFontSize();
      }
    }
  }
};
</script>

<style>
.echarts-tooltip {
  z-index: 1000;
}
</style>
